<template>
    <div class="confirm" >
       <!-- <div class="confirm-mask"></div> -->
        <div class="confirm-content" >
            <div class="confirm-header" v-html="options.header"></div>

            <h2 class="confirm-title" v-if="options.title">{{options.title}}</h2>

            <p class="confirm-desc" v-html="options.desc"></p>

            <div class="confirm-footer" :style="{'justifyContent': options.hideCancel ? 'center' : 'space-between'}">

                <button v-if="!options.hideCancel"
                        @click="handleCancel"
                        class="confirm-btn confirm-btn__cancel">{{options.btnText.cancel}}</button>

                <button class="confirm-btn confirm-btn__confirm"
                        @click="handleConfirm">{{options.btnText.confirm}}</button>

            </div>

        </div> 

    </div>

</template>

<script>
export default {
  name: 'confirm',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          header: '',
          title: '',
          desc: '',
          btnText: {
            confirm: '确认',
            cancel: '取消'
          },
          hideCancel: false,
          success: function () {},
          cancel: function () {}
        }
      }
    }
  },
  data () {
    return {
    }
  },
  methods: {
    handleCancel () {
      this.options.cancel()
    },
    handleConfirm () {
      this.options.success()
    }
  },
  watch: {
    options: {
      immediate: true,
      handler: function (newOpt, oldOpt) {
        this.options = Object.assign(this.options, newOpt)
      }
    }
  }
}
</script>

<style scoped="scoped" lang="scss">

    .confirm {
        position: fixed;
        z-index: 1000;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        background:rgba(51,51,51,0.4);
        // &-mask {
        //     position: absolute;
        //     z-index: 1;
        //     top: 0;
        //     left: 0;
        //     width: 100%;
        //     height: 100%;
        //     background:rgba(51,51,51,0.4);
        // }
        &-content {
            overflow: hidden;
            z-index: 9999;
            z-index: 11;
            width: 2.79rem;
            border-radius: 0.05rem;
            background-color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
        }
        &-title {
            font-size: 0.12rem;
            font-weight: 700;
            margin: 0.15rem 0;
            text-align: center;
        }
        &-desc {
            text-align: center;
            font-size: 0.17rem;
            color: #333333;
            line-height: 0.24rem;
            min-height: 0.69rem;
            padding: 0.22rem 0.27rem;
        }
        &-footer {
            width: 100%;
            display: flex;
            align-items: center;

        }
        &-btn {
            width: 100%;
            height: 0.44rem;
            font-size: 0.17rem;
            &__cancel {
                background-color: #E8E8E8;
                color: #999999;
            }
            &__confirm {
                background-color: #FF8C2D;
                color: #ffffff;
            }
        }
    }

</style>
